{% extends "web/pages/base_page.js.jinja2" %}
{% from "web/pages/macros.js.jinja2" import renderHooks %}

{% block early_imports %}
import reflexGlobalStyles from '$/styles/__reflex_global_styles.css?url';
{% endblock %}

{% block declaration %}
import { EventLoopProvider, StateProvider, defaultColorMode } from "$/utils/context";
import { ThemeProvider } from '$/utils/react-theme';
import { Layout as AppLayout } from './_document';
import { Outlet } from 'react-router';
{% for library_alias, library_path in  window_libraries %}
import * as {{library_alias}} from "{{library_path}}";
{% endfor %}

{% for custom_code in custom_codes %}
{{custom_code}}
{% endfor %}
{% endblock %}

{% block export %}
export const links = () => [
  { rel: 'stylesheet', href: reflexGlobalStyles, type: 'text/css' }
];

function AppWrap({children}) {
  {{ renderHooks(hooks) }}

  return (
    {{utils.render(render)}}
  )
}


export function Layout({children}) {
    useEffect(() => {
    // Make contexts and state objects available globally for dynamic eval'd components
    let windowImports = {
{% for library_alias, library_path in  window_libraries %}
      "{{library_path}}": {{library_alias}},
{% endfor %}
    };
    window["__reflex"] = windowImports;
  }, []);

  return jsx(AppLayout, {},
    jsx(ThemeProvider, {defaultTheme: defaultColorMode, attribute: "class"},
      jsx(StateProvider, {},
        jsx(EventLoopProvider, {},
          jsx(AppWrap, {}, children)
        )
      )
    )
  );
}

export default function App() {
  return jsx(Outlet, {});
}

{% endblock %}
